<template>
	<view class="integral">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
		</uv-navbar>
		<view class="header">
			<view class="btn_view">
				<view class="key">我的积分</view>
				<view class="btn" @click="router('/pages/my/give_integral')">转赠</view>
			</view>
			<view class="value">{{integral_value}}</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="content">
				<view class="list">
					<view class="title">积分明细</view>
					<view class="item" v-for="item in _this.list">
						<view class="info">
							<view class="name">{{item.type_name}}</view>
							<view class="time">{{item.created_at}}</view>
						</view>
						<view class="right">
							<view class="price">{{item.value}}</view>
							<view class="balance">余额：{{item.after}}</view>
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		userInfo,
		userLog
	} from "@/request/api";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();

	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";

	const integral_value = ref("");
	const getList = async () => {
		let {
			list,
			integral
		} = await userLog({
			field: "integral",
			page: _this.page,
			limit: _this.limit
		});
		integral_value.value = integral;

		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	onShow(() => getList());
	onShow(() => _this.page = 1);
</script>

<style scoped lang="scss">
	.integral {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: #f5f5f5;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.header {
			height: 250rpx;
			padding: 42rpx 55rpx 0rpx;
			box-sizing: border-box;
			background: #CA1C1D;

			.btn_view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.key {
					color: #EAE9EF;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}

				.btn {
					width: 120rpx;
					height: 52rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 2rpx solid #FFFFFF;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.value {
				color: #FFFFFF;
				font-size: 80rpx;
				font-weight: bold;
				padding-top: 28rpx;
				box-sizing: border-box;
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 250rpx);

			.content {
				padding: 30rpx 25rpx 0;
				box-sizing: border-box;

				.list {
					border-radius: 20rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					overflow: hidden;

					.title {
						height: 90rpx;
						line-height: 90rpx;
						color: #333333;
						font-size: 30rpx;
						font-weight: bold;
					}

					.item {
						height: 120rpx;
						border-bottom: 1px solid #EEEEEE;
						padding: 26rpx 0 20rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;

						.info {
							height: 100%;
							width: 250rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.name {
								color: #333333;
								font-size: 28rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.time {
								color: #999999;
								font-size: 22rpx;
							}
						}

						.right {
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.price {
								color: #333333;
								font-size: 36rpx;
								font-weight: bold;
							}

							.balance {
								color: #999999;
								font-size: 22rpx;
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
</style>